<template>
  <!-- 上部 -->
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <div style="display: flex; flex-direction: row; align-items: center;">
        <h3 style="font-size: 14px; margin-right: 10px; margin-left: 1px;">开始时间</h3>
        <el-input v-model="startTime" placeholder="请输入时间xx.xx" style="width: 160px; font-size: 14px;" />
      </div>
    </el-col>

    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <div style="display: flex; flex-direction: row; align-items: center;">
        <h3 style="font-size: 14px; margin-right: 10px; margin-left: 1px;">结束时间</h3>
        <el-input v-model="endTime" placeholder="请输入时间xx.xx" style="width: 160px; font-size: 14px;" />
      </div>
    </el-col>

    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <div style="display: flex; flex-direction: row; align-items: center;">
        <h3 style="font-size: 14px; margin-right: 8px;">状态</h3>
        <el-select
          v-model="value"
          class="m-2"
          placeholder="请选择"
          style="width: 170px"
        >
        <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
        />
        </el-select>
        <el-button type="primary" style="width: 40px; font-size: 13px; margin-left: 13px;">新增</el-button>
      </div>
    </el-col>
  </el-row>

  <!-- 分割线 -->
  <el-divider class="custom-divider" border-style="dashed" />

  <!-- 下部 -->
  <el-table :data="tableData" border style="width: 100% ;height: auto;" >
    <el-table-column fixed prop="number" label="序号" width="70" align="center"/>
    <el-table-column prop="date" label="学期" width="200" align="center"/>
    <el-table-column prop="startTime" label="开始时间" width="200" align="center"/>
    <el-table-column prop="endTime" label="结束时间" width="200" align="center"/>
    <el-table-column prop="status" label="状态" width="200" align="center"/>
    <el-table-column label="操作" width="437" align="center">
      <el-button type="success" style="margin-right: 27px;">查看</el-button>
      <el-button type="danger" style="margin-right: 27px;">删除</el-button>
      <el-button type="info" style="margin-right: 27px;">修改</el-button>
      <el-button type="primary" style="margin-right: 10px;">新增</el-button>
    </el-table-column>
  </el-table>
</template>


<script lang="ts" setup>
import { ref } from 'vue'

// 定义 startTime 和 endTime
const startTime = ref('');
const endTime = ref('');

//定义启用与禁用
const value = ref('')

const options = [
  {
    value: '不限',
    label: '不限',
  },
  {
    value: '启用',
    label: '启用',
  },
  {
    value: '禁用',
    label: '禁用',
  },
]


//定义表格
const tableData = [
  {
    number: '1',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '2',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '3',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '4',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '5',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '6',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
  {
    number: '7',
    date: '2022-2023年第一学期',
    startTime: '2022.11',
    endTime: '2022.XX',
    status: '启用',
  },
]
</script>


<style>
  .custom-divider::before,
  .custom-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    border-top-width:0ch; /* 调整线条粗细 */
    border-color:#ccc; /* 将线条颜色设置为浅灰色 */
    border-style: dashed;
  }
</style>